<template>
	<view style="position: relative;">
		<template v-if="tableType == 2">
			<view class="order-list">
				<view class="order-item" v-for="(item, index) in list" :key="index">
					<view class="order-body">
						<view class="time-order">
							<view class="time item" style="font-size: 28rpx !important;">
								<text class="txt FfontSize">日期：</text>
								<text class="txt FfontSize">{{item.date || ''}}</text>
							</view>
							<view class="time item">
								<text class="txt FfontSize">快递单号：</text>
								<view class="copy">
									<text class="txt FfontSize">{{item.domestic_tracking_number || ''}}</text>
									<image @click.stop="copyData(item.domestic_tracking_number)"
										src="/static/images/copy.png" mode="widthFix" class="img"></image>
								</view>
							</view>
						</view>
						<view class="summaryDetails">
							<view>
								<text class="txt FfontSize">摘要：</text>
								<text class="txt FfontSize">{{item.summary || ''}}</text>
							</view>
							<view style="font-weight: 600;">
								<text class="txt FfontSize">代垫：</text>
								<text class="txt FfontSize">{{item.amount || 0}}</text>
							</view>
						</view>
					</view>
					<view class="order-footer">
						<view class="see-image" @click.stop="showImage(item)">查看图片</view>
					</view>
				</view>
			</view>
		</template>

		<template v-if="tableType == 1">
			<div class="secondaryChargeContent">
				<div class="header-tab">
					<u-tabs :list="tabList" @click="TabClick" :lineWidth="35" :inactiveStyle="inactiveStyle"
						:activeStyle="activeStyle" lineHeight="6rpx" lineColor="#0059ff" style="padding-bottom: 20rpx;">
					</u-tabs>
				</div>
				<view class="order-list">
					<view class="order-item" v-for="(item, index) in list" :key="index">
						<view class="order-body">
							<!-- 二次费用区域 -->
							<template v-if="tabActiveItem === 'secondDeliveryCost' ">
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name">币种：</view>
										<view class="secondCostItem-value">{{ item.currency }}</view>
									</view>
									<view class="secondCostItem">
										<view class="secondCostItem-name">二派：</view>
										<view class="secondCostItem-value">{{ item.secondDelivery }}</view>
									</view>
								</view>
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name">超才：</view>
										<view class="secondCostItem-value">{{ item.overSize }}</view>
									</view>
									<view class="secondCostItem">
										<view class="secondCostItem-name">专车：</view>
										<view class="secondCostItem-value">{{ item.specialVehicle }}</view>
									</view>
								</view>
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name">超重：</view>
										<view class="secondCostItem-value">{{ item.overWeight }}</view>
									</view>
									<view class="secondCostItem">
										<view class="secondCostItem-name">打板：</view>
										<view class="secondCostItem-value">{{ item.pallet }}</view>
									</view>
								</view>
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name">仓储：</view>
										<view class="secondCostItem-value">{{ item.warehousing }}</view>
									</view>
									<view class="secondCostItem">
										<view class="secondCostItem-name" style="color:red">合计：</view>
										<view class="secondCostItem-value" style="color:red">{{ item.total }}</view>
									</view>
								</view>
							</template>

							<template v-if="tabActiveItem === 'clearanceCost' ">
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name">币种：</view>
										<view class="secondCostItem-value">{{ item.currency }}</view>
									</view>
									<view class="secondCostItem">
										<view class="secondCostItem-name">报关费：</view>
										<view class="secondCostItem-value">{{ item.customsDeclaration }}</view>
									</view>
								</view>
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name">不包含税税金：</view>
										<view class="secondCostItem-value">{{ item.taxes }}</view>
									</view>
									<view class="secondCostItem">
										<view class="secondCostItem-name">移仓费：</view>
										<view class="secondCostItem-value">{{ item.relocation }}</view>
									</view>
								</view>
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name">仓费：</view>
										<view class="secondCostItem-value">{{ item.warehousing }}</view>
									</view>
									<view class="secondCostItem">
										<view class="secondCostItem-name">杂费：</view>
										<view class="secondCostItem-value">{{ item.miscellaneous }}</view>
									</view>

								</view>
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name" style="color:red">合计：</view>
										<view class="secondCostItem-value" style="color:red">{{ item.total }}</view>
									</view>
								</view>
							</template>

							<template v-if="tabActiveItem === 'shippingCost' ">
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name">币种：</view>
										<view class="secondCostItem-value">{{ item.currency }}</view>
									</view>

									<view class="secondCostItem">
										<view class="secondCostItem-name">报单费：</view>
										<view class="secondCostItem-value">{{ item.customsDeclaration }}</view>
									</view>
								</view>
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name">操作费：</view>
										<view class="secondCostItem-value">{{ item.handlingFee }}</view>
									</view>
									<view class="secondCostItem">
										<view class="secondCostItem-name">安检未过：</view>
										<view class="secondCostItem-value">{{ item.securityFee }}</view>
									</view>
								</view>
								<view class="secondCostDetail">
									<view class="secondCostItem">
										<view class="secondCostItem-name">其他费用：</view>
										<view class="secondCostItem-value">{{ item.otherFees }}</view>
									</view>
									<view class="secondCostItem">
										<view class="secondCostItem-name" style="color:red">合计：</view>
										<view class="secondCostItem-value" style="color:red">{{ item.total }}</view>
									</view>
								</view>
							</template>
						</view>
					</view>
				</view>
			</div>
		</template>
		<u-loadmore :status="loadStatus" height="80rpx" />
	</view>
</template>

<script>
	import {
		advanceMoneyAnotherList,
		secondaryCharge
	} from "@/api/order.js";
	export default {
		data() {
			return {
				type: "notWarehousing", // notWarehousing 待进仓  warehousing 已进仓  outWarehousing 已出仓,
				page: 1,
				loadStatus: "loadmore",
				dateRange: [],
				order: "",
				surname: "",
				title: "",
				searchTimeSelectIndex: 0,
				list: [],

				tableType: "",
				tabList: [{
						name: "派件费",
						id: 'secondDeliveryCost'
					},
					{
						name: "清关费用",
						id: 'clearanceCost'
					},
					{
						name: "航空/船运费",
						id: 'shippingCost'
					}
				],
				activeStyle: {
					fontSize: '36rpx',
					color: '#000002',
					fontWeight: '600',
				},
				inactiveStyle: {
					fontWeight: '600',
					fontSize: '28rpx',
					color: '#8c9198',
				},
				tabActiveItem: 'secondDeliveryCost',
			};
		},
		watch: {
			async order() {
				await this.pullOrderList();
			},
			async surname() {
				await this.pullOrderList();
			},
			async title() {
				await this.pullOrderList();
			},
			async searchTimeSelectIndex() {
				await this.pullOrderList();
			}
		},
		async onLoad(options) {
			if (options.order && options.tableType) {
				uni.setNavigationBarTitle({
					title: options.tableType == 1 ?
						"二次费用" :
						options.tableType == 2 ?
						"代垫费用" :
						""
				});
				this.order = options.order;
				this.tableType = options.tableType || "";
			}
			await this.loadData();
		},
		async onPullDownRefresh() {
			await this.pullOrderList();
			uni.stopPullDownRefresh();
		},
		async onReachBottom() {
			await this.loadOrderList();
		},
		methods: {
			//头部切换
			async TabClick(e) {
				this.tabActiveItem = e.id
				this.page = 1;
				this.loadStatus = "loadmore";
				await this.loadOrderList();
			},

			searchTimeChange(index) {
				if (this.searchTimeSelectIndex == index) return;
				this.searchTimeSelectIndex = index;
			},
			copyData(data) {
				uni.setClipboardData({
					data
				});
			},
			async pullOrderList() {
				this.page = 1;
				this.loadStatus = "loadmore";
				await this.loadOrderList();
			},

			async loadOrderList() {
				try {
					if (this.loadStatus === "nomore") {
						return;
					}
					this.loadStatus = "loading";
					let page = this.page;
					if (page == 1) {
						this.list = [];
					}
					const requestType =
						this.tableType == 1 ?
						secondaryCharge :
						this.tableType == 2 ?
						advanceMoneyAnotherList :
						"";
					let res = await requestType({
						p: page,
						logistics_number: this.order
					});
					this.loadStatus = "loadmore";

					let list = [];
					let listLength = 0;
					if (this.tableType == 1) {
						let activeItem = this.tabActiveItem;
						list = res.list[activeItem] || [];
						listLength = list.length;

					} else if (this.tableType == 2) {
						list = res.list || [];
						listLength = list.length;
					}
					if (listLength <= 0) {
						this.loadStatus = "nomore";
					}
					this.list = [...(page === 1 ? [] : this.list), ...list];
					this.page = page + 1;
				} catch (e) {
					this.loadStatus = "loadmore";
				}
			},
			async loadData() {
				await this.loadOrderList();
			},
			showImage(item) {
				uni.navigateTo({
					url: `/pages/showImage/show-image?img=${item.image}`
				});
			}
		}
	};
</script>

<style lang="scss">
	::v-deep .u-tabs__wrapper__nav__item {
		flex: 1;
	}

	.FfontSize {
		font-size: 30rpx !important;
	}

	page {
		background-color: #fff;
	}

	.secondaryChargeContent {
		.header-tab {
			position: sticky;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 100rpx;
			z-index: 99;
			background: #f0f0f0;
		}
	}

	.order-list {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.order-item {
			background-color: #fff;
			width: 100%;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			box-shadow: 2rpx 2rpx 28rpx 0 rgba(0, 0, 0, 0.06);

			.ellipsis {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.flex {
				display: flex;
				width: 100%;
			}

			.flex-space-between {
				justify-content: space-between;
			}

			.flex-align-center {
				align-items: center;
			}

			.color-09f {
				color: #09f;
			}

			.font-24 {
				font-size: 24rpx;
			}

			.order-head {
				border-bottom: 1rpx solid #eee;
				box-sizing: border-box;
				padding: 20rpx;
				box-sizing: border-box;
			}

			.copy {
				display: flex;
				align-items: center;

				.img {
					margin-left: 10rpx;
					width: 20rpx;
					height: 20rpx;
				}
			}

			.order-body {
				padding: 20rpx;
				box-sizing: border-box;

				.secondCostDetail {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					padding: 20rpx 0;

					border-bottom: 2rpx solid #f0f0f0;

					.secondCostItem {
						display: flex;
						align-items: center;

						.secondCostItem-name {
							width: 140rpx;
							color: #000;
							font-size: 32rpx;
							font-weight: 600;
						}

						.secondCostItem-value {
							width: 185rpx;
							font-size: 28rpx;
							// color: #e6201a;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							lines: 1;
						}
					}
				}

				.summaryDetails {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #e6201a;
					padding: 15rpx 0 15rpx 0;
				}

				.time-order {
					padding-bottom: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item {
						display: flex;
						align-items: center;

						.txt {
							font-size: 24rpx;
							color: #666;
						}
					}
				}

				.express-dynamic {
					flex-direction: column;
					align-items: flex-start;
					width: 100%;

					.item {
						.txt {
							color: #e6201a;
						}
					}

					.dynamic-txt {
						padding-top: 10rpx;
						width: 100%;
					}
				}

				.order-goods {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// padding-top: 20rpx;

					.goods-image-title {
						display: flex;
						align-items: stretch;
						justify-content: center;
						flex-direction: column;
						overflow: hidden;

						.image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 16rpx;
							overflow: hidden;

							.img {
								width: 100%;
								height: 100%;
							}
						}

						.title {
							padding-top: 10px;
							overflow: hidden;
							text-align: center;

							.txt {
								overflow: hidden;
								text-align: center;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-size: 28rpx;
								color: #000;
							}
						}
					}

					.acting-num {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;
						flex-direction: column;
						flex: 1;

						.num-item {
							padding-bottom: 15rpx;
							font-size: 26rpx;
							color: #333;
							font-weight: bold;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							width: 160rpx;

							.num-item-title {
								width: 100rpx;
								text-align: justify;
								display: inline-block;
								text-align-last: justify;
							}

							.num-item-val {
								flex: 1;
								text-align: right;
							}
						}

						.num-item:last-child {
							padding-bottom: 0;
						}

						.num-item.active {
							color: #e6201a;
						}
					}
				}

				.order-type-pack {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					color: #e6201a;
					padding: 20rpx 0;
				}

				.order-other-info {
					padding: 20rpx;
					border-radius: 16rpx;
					background-color: rgba(0, 0, 0, 0.05);
					display: flex;
					align-items: center;
					justify-content: space-between;

					.other-info-item {
						flex: 1;
						position: relative;
						display: flex;
						align-items: stretch;
						justify-content: space-between;
						flex-direction: column;
						font-size: 22rpx;
						color: #666;

						.goods-other-info-line,
						.other-order-num-item {
							margin-bottom: 20rpx;
						}

						.goods-other-info-line:last-child,
						.other-order-num-item:last-child {
							margin-bottom: 0;
						}
					}

					.other-info-item:first-child {
						margin-right: 10rpx;

						&::after {
							content: " ";
							display: block;
							width: 2rpx;
							height: 80%;
							background-color: #dedede;
							border-radius: 2rpx;
							position: absolute;
							right: -11rpx;
							top: 50%;
							transform: translateY(-50%);
						}
					}

					.other-info-item:last-child {
						margin-left: 10rpx;
					}

					.goods-other-info-line {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.goods-other-info-item {
							flex: 1;
						}
					}

					.other-order-num {
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						flex-direction: column;

						.other-order-num-item {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.value {
								display: flex;
								align-items: center;
								justify-content: flex-start;

								.img {
									width: 20rpx;
									height: 20rpx;
									margin-left: 5rpx;
								}
							}
						}
					}
				}
			}

			.order-footer {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 0 0 20rpx 0;
			}
		}

		.order-item:last-of-type {
			margin-bottom: 0;
		}
	}

	.see-image {
		width: 125rpx;
		height: 50rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #e6201a;
		margin-right: 20rpx;
	}
</style>